<template>
    <div class="page" v-show="pageActive == 1">
        <div class="left-box">
            <iframe ref="image2Ref" :src="`./user_image_2?uid=${userStore.userInfo.id}`"></iframe>
            <div class="nickname">
                {{ userStore.userInfo.nickname || mobile }}
            </div>
            <div class="personal-signature">
                个性签名：{{ userStore.userInfo.personal_ignature || "-" }}
            </div>
            <div class="info-cell">
                <div class="cell-item" @click="showHomepageListDialog(1)">
                    <div class="cell-item__top">{{ info.like_num || 0 }}</div>
                    <div class="cell-item__bottom">获赞</div>
                </div>
                <div class="cell-item" @click="showHomepageListDialog(2)">
                    <div class="cell-item__top">{{ info.friend_num || 0 }}</div>
                    <div class="cell-item__bottom">朋友</div>
                </div>
                <div class="cell-item" @click="showHomepageListDialog(3)">
                    <div class="cell-item__top">{{ info.follow_num || 0 }}</div>
                    <div class="cell-item__bottom">关注</div>
                </div>
                <div class="cell-item" @click="showHomepageListDialog(4)">
                    <div class="cell-item__top">{{ info.fans_num || 0 }}</div>
                    <div class="cell-item__bottom">粉丝</div>
                </div>
            </div>
            <div class="btn-1" @click="onEditInformation">编辑资料</div>
            <div class="btn-2" @click="pageActive = 2">自定义形象</div>
        </div>

        <div class="right-box">
            <div class="top">
                <div class="tabs">
                    <div class="tab-item" @click="onTabClick(item.value)" :class="{ active: item.value === tabActive }"
                        v-for="item in tabList" :key="item.value">
                        {{
                            item.label }}
                    </div>
                </div>

                <!-- <div class="btn-group">
                    <div class="btn-primary">管理</div>
                </div> -->
            </div>

            <div class="content" v-loading="loading">
                <WorksGroupP :list="renderList" v-if="list.length" />
                <el-empty :image-size="150" description="暂无作品" v-else />

                <div class="pagination" v-if="list.length && list.length > pagination.size">
                    <el-pagination background layout="prev, pager, next, jumper" :total="list.length"
                        :current-page="pagination.page" :page-size="pagination.size" prev-text="上一页" next-text="下一页"
                        @current-change="onPageChange" />
                </div>
            </div>
        </div>
    </div>

    <div class="diy-image" v-show="pageActive == 2">
        <div class="back-btn" @click="pageActive = 1">
            <img :src="`${_oss_}images/arrow-left-bold.svg`" />
        </div>

        <iframe :src="`./user_image_1?uid=${userStore.userInfo.id}&t=2`"></iframe>
    </div>

    <DialogInformationP ref="informationRef" />
    <DialogHomepageListMyP ref="homepageListMyRef" />
</template>
<script setup>
import { GetMyHomepage, GetMyShareList, GetMyWorksList, GetMyStarList, GetMyLikeList } from "@/api";
import { useMobile } from "~/hooks";

const userStore = useUserStore();
const mobile = useMobile();
const informationRef = ref(null);
const homepageListMyRef = ref(null);
const image2Ref = ref(null);
const info = ref({});
const pageActive = ref(1);
const tabActive = ref(1);
const tabList = reactive([
    {
        label: "作品",
        value: 1
    },
    {
        label: "收藏",
        value: 2
    },
    {
        label: "喜欢",
        value: 3
    },
    {
        label: "分享",
        value: 4
    },
]);
const list = ref([]);
const pagination = reactive({
    size: 6,
    page: 1,
});
const loading = ref(false);

const onPageChange = (page) => {
    pagination.page = page;
}

const renderList = computed(() => {
    return list.value.slice(
        (pagination.page - 1) * pagination.size,
        pagination.page * pagination.size,
    );
})

const onEditInformation = () => {
    informationRef.value.show();
};

const onImageSave = () => {
    image2Ref.value.contentWindow.postMessage("resetImage", "*");
};

const onTabClick = (value) => {
    tabActive.value = value;
    pagination.page = 1;
    GetList();
}

const showHomepageListDialog = (type) => {
    homepageListMyRef.value.open(type);
}

function onMessage(e) {
    if (e.data === "imageSave") {
        setTimeout(() => {
            onImageSave();
        }, 200);
    }
}

async function getMyHomepgae() {
    const res = await GetMyHomepage();

    info.value = res.data;
}

async function GetList() {
    const apiFunc = {
        1: GetMyWorksList,
        2: GetMyStarList,
        3: GetMyLikeList,
        4: GetMyShareList,
    }[tabActive.value]

    loading.value = true;
    const res = await apiFunc();
    loading.value = false;

    list.value = res.data;
}

onMounted(() => {
    window.addEventListener("message", onMessage);
});

onUnmounted(() => {
    window.removeEventListener("message", onMessage);
});

await getMyHomepgae();
await GetList();
</script>
<style lang="scss" scoped>
.page {
    display: flex;
    width: 100%;
    height: 100%;

    .left-box {
        width: 294px;
        padding: 0 16px;
        background-color: #fff;
        border-right: 1px solid #f1f1f1;

        .nickname {
            font-size: 24px;
            text-align: center;
            font-weight: bold;
            padding-top: 15px;
        }

        .personal-signature {
            text-align: center;
            color: #333;
            font-size: 16px;
            padding-top: 20px;
        }

        .info-cell {
            width: 100%;
            padding: 20px 17px 0;
            display: flex;

            .cell-item {
                flex: 1;
                text-align: center;
                color: #333;
                line-height: 1em;

                &__top {
                    font-size: 16px;
                    font-weight: bold;
                    cursor: pointer;
                }

                &__bottom {
                    font-size: 14px;
                    margin-top: 8px;
                }
            }
        }

        .btn-1,
        .btn-2 {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 260px;
            height: 40px;
            margin: 14px auto 0;
            border-radius: 8px;
            cursor: pointer;
            background: #5085fb;
            color: #fff;
        }

        .btn-1 {
            margin-top: 30px;
        }

        .btn-2 {
            margin-top: 14px;
        }
    }

    .left-box {
        overflow: hidden auto;
        padding-bottom: 20px;

        iframe {
            display: block;
            width: 260px;
            height: 400px;
            border-radius: 12px;
            margin-top: 16px;
            border: none;
        }
    }

    .right-box {
        width: 906px;
        height: 100%;
        overflow: auto;
        background: #fff;
        padding-left: 12px;

        .top {
            display: flex;
            align-items: center;
            padding-top: 16px;

            .tabs {
                display: flex;

                .tab-item {
                    margin-right: 30px;
                    color: #333;
                    padding-bottom: 7px;
                    cursor: pointer;

                    &.active {
                        position: relative;
                        color: #5085FB;

                        &::after {
                            content: "";
                            position: absolute;
                            left: 50%;
                            bottom: 0;
                            width: 29px;
                            height: 2px;
                            background: #5085FB;
                            transform: translateX(-50%);
                        }
                    }
                }
            }

            .btn-group {
                margin-left: auto;
                padding: 0 12px;

                .btn-primary {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 60px;
                    height: 30px;
                    font-size: 14px;
                    color: #FFFFFF;
                    background: #5085FB;
                    border-radius: 4px;
                }
            }
        }


        :deep(.product-list) {
            margin-top: 15px;

            .product-item {
                margin-right: 8px;

                &:nth-of-type(4n) {
                    margin-right: 8px;
                }

                &:nth-of-type(3n) {
                    margin-right: 0;
                }
            }
        }

        .pagination {
            margin-top: 10px;
            display: flex;
            justify-content: center;
        }
    }
}

.diy-image {
    position: relative;
    width: 100%;
    height: 100%;

    .back-btn {
        position: absolute;
        top: 10px;
        left: 10px;
        display: flex;
        align-items: center;
        justify-content: center;

        width: 30px;
        height: 30px;
        background-color: rgba($color: #000000, $alpha: 0.5);
        border-radius: 50%;
        cursor: pointer;

        img {
            width: 16px;
            height: 16px;
        }

    }

    iframe {
        display: block;
        width: 100%;
        height: 100%;
        border: none;
    }
}
</style>
